<template>
    <div class="not-page">
        <div class="prompt">没有找到该页面，<span style="color: red;">{{ countdown }}</span>秒后将跳转到首页...</div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { removeToken } from '@/utils/auth'
const router = useRouter()
const countdown = ref(5)
onMounted(() => {
    const timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
            clearInterval(timer)
            removeToken()
            router.replace('/login')
        }
    }, 1000)
    return () => clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.not-page {
    width: 100vw;
    height: 100vh;
    position: relative;
    object-fit: cover;
    background-image: url('@assets/image/404.png');
    background-size: 100% 100%;

    .prompt {
        position: absolute;
        background-color: rgb(199, 199, 199);
        padding: 5px 20px;
        box-sizing: border-box;
        top: 10%;
        left: 50%;
        border-radius: 5px;
        transform: translateX(-50%);
    }
}
</style>
